<template>
  <div class="mainBox">
    <div class="routerMsg">{{ routerMsg }}</div>
    <div class="container">
      <div class="btnBox">
        <div class="addBtn">
          <el-button
            v-permission="'accountManagementAdd'"
            type="success"
            @click="addMenu('')"
            >添加</el-button
          >
        </div>
      </div>
      <div class="tableBox">
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
        >
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="id"
            label="序号"
            width="260"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="userName"
            label="用户名"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="enable"
            label="启用/禁用"
          >
            <template slot-scope="scope">
              <el-switch
                active-color="#269E8F"
                v-model="scope.row.enable"
                active-text="启用"
                inactive-text="禁用"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="roleName"
            label="所属角色"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="name"
            label="姓名"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="phoneNumber"
            label="手机号"
          >
          </el-table-column>
          <el-table-column
            width="200"
            align="center"
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                v-permission="'accountManagementEdit'"
                style="color: #269e8f"
                type="text"
                @click="addMenu(scope.row)"
                >编辑</el-button
              >
              <el-button
                v-permission="'accountManagementEdit'"
                style="color: #269e8f"
                type="text"
                @click="editPassword(scope.row)"
                >修改密码</el-button
              >
              <el-button
                v-permission="'accountManagementDel'"
                style="color: #f56c6c"
                type="text"
                @click="deleteCompany(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="1218px"
        :before-close="handleClose"
        :show-close="false"
        :append-to-body="true"
        custom-class="dialogCompany"
      >
        <div class="dialogTitle" slot="title">{{ dialogTitle }}</div>
        <div class="dialogForm">
          <el-form ref="form" :model="form" label-width="200px" :inline="true">
            <div class="formBox">
              <div class="formItem">
                <div class="left">
                  <el-form-item label="姓名">
                    <el-input
                      :disabled="seeForm"
                      placeholder="请输入"
                      v-model="form.name"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="区域编码">
                    <el-cascader
                      v-model="form.areaCode"
                      :props="{
                        value: 'areaCode',
                        label: 'areaName',
                        children: 'platformAreaCodeVoList',
                        emitPath: false,
                      }"
                      :disabled="seeForm"
                      :options="areaList"
                      @change="chooseAreaCode"
                    ></el-cascader>
                  </el-form-item>
                </div>
              </div>
              <div class="formItem">
                <div class="left">
                  <el-form-item label="用户名">
                    <el-input
                      :disabled="seeForm"
                      placeholder="请输入"
                      v-model="form.userName"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="所属角色">
                    <el-select v-model="form.roleId" placeholder="请选择">
                      <el-option
                        v-for="item in roleAccList"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <div class="formItem">
                <div class="left">
                  <el-form-item label="启用/禁用">
                    <el-switch
                      v-model="form.enable"
                      active-color="#269E8F"
                      active-text="启用"
                      inactive-text="禁用"
                      @change="chooseFromS"
                    >
                    </el-switch>
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="邮箱">
                    <el-input
                      placeholder="请输入"
                      v-model="form.email"
                      :disabled="seeForm"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div class="formItem">
                <div class="left">
                  <el-form-item label="手机号码">
                    <el-input
                      :disabled="seeForm"
                      placeholder="请输入"
                      v-model="form.phoneNumber"
                    ></el-input>
                  </el-form-item>
                </div>
                <div class="left" v-if="!form.id">
                  <el-form-item label="密码">
                    <el-input
                      :disabled="seeForm"
                      placeholder="请输入"
                      v-model="form.password"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button
            :disabled="seeForm"
            class="leftCancel"
            type="primary"
            @click="submitForm"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="passwordDialog"
        width="1218px"
        :before-close="handleClosePassword"
        :show-close="false"
        :append-to-body="true"
        custom-class="dialogCompany"
      >
        <div class="dialogTitle" slot="title">修改密码</div>
        <div class="dialogForm">
          <el-form
            ref="form"
            :model="passForm"
            label-width="200px"
            :inline="true"
          >
            <div class="formBox">
              <div class="formItem">
                <div class="right">
                  <el-form-item label="新密码">
                    <el-input
                      :disabled="seeForm"
                      placeholder="请输入"
                      v-model="passForm.password"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClosePassword">取 消</el-button>
          <el-button
            :disabled="seeForm"
            class="leftCancel"
            type="primary"
            @click="submitPassword"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  userList,
  areaDict,
  userAdd,
  userUpdate,
  userDelete,
  updateUserPassword,
} from '@/api/systemManagement/accountManagement'
import { roleList } from '@/api/systemManagement/roleManagement'
export default {
  name: 'menuManagement',
  props: {},
  components: {},
  data() {
    return {
      routerMsg: '',
      tableData: [],
      form: {
        name: '',
        areaCode: '',
        userName: '',
        password: '',
        enable: true,
        email: '',
        phoneNumber: '',
        roleId: '',
      },
      dialogTitle: '添加账号',
      dialogVisible: false,
      seeForm: false,
      value1: false,
      areaList: [],
      roleAccList: [],
      passwordDialog: false,
      passForm: {
        id: '',
        password: '',
      },
    }
  },
  methods: {
    addMenu(msg) {
      this.getAreaDict()
      if (msg) {
        this.form = {
          ...msg,
          enable: msg.enable == 1 ? true : false,
        }
        this.dialogTitle = '编辑账号'
      } else {
        this.dialogTitle = '新增账号'
      }
      this.dialogVisible = true
    },
    deleteCompany(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await userDelete({ id: row.id })
          if (res.data) {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
            this.getAccountList()
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleClose() {
      this.dialogVisible = false
      this.form = {
        name: '',
        areaCode: '',
        userName: '',
        password: '',
        enable: true,
        email: '',
        phoneNumber: '',
        roleId: '',
      }
    },
    async submitForm() {
      if (!this.form.id) {
        const res = await userAdd({
          ...this.form,
          enable: this.form.enable ? '1' : '0',
        })
        this.handleFunction(res)
      } else {
        const res = await userUpdate({
          ...this.form,
          enable: this.form.enable ? '1' : '0',
        })
        this.handleFunction(res)
      }
      this.handleClose()
    },
    handleFunction(res) {
      if (res.data) {
        this.$message.success('编辑成功')
        this.getAccountList()
      } else {
        this.$message.error(res.data)
      }
    },
    chooseFromS(e) {
      console.log(e)
    },
    async getAccountList() {
      const res = await userList()
      this.tableData = res.data.map((item) => {
        return {
          ...item,
          enable: item.enable == 1 ? true : false,
        }
      })
    },
    async getAreaDict() {
      const res = await areaDict()
      this.areaList = res.data
      console.log(res)
    },
    chooseAreaCode(e) {
      this.form.areaCode = e
    },
    async getRoleList() {
      const res = await roleList()
      console.log(res)
      this.roleAccList = res.data
    },
    editPassword(row) {
      this.passwordDialog = true
      this.passForm.id = row.id
    },
    handleClosePassword() {
      this.passForm = {
        id: '',
        password: '',
      }
      this.passwordDialog = false
    },
    async submitPassword() {
      const res = await updateUserPassword({
        id: this.passForm.id,
        password: this.passForm.password,
      })
      if (res.data) {
        this.$message.success('修改成功')
        this.handleClosePassword()
      } else {
        this.$message.error('修改成功')
      }
    },
  },
  created() {
    this.routerMsg = this.$route.meta.title
    this.getAccountList()
    this.getRoleList()
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.routerMsg {
  padding: 20px;
  color: #999999;
  font-size: 14px;
}
.mainBox {
  width: 100%;
}

.container {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 25px;
  .searchBox {
    display: flex;
    margin-bottom: 20px;
    .search1 {
      margin-right: 15px;
    }
    .searchBtn {
      .el-button {
        border: 1px solid #269e8f;
        color: #269e8f;
      }
      .reset {
        border: 1px solid #269e8f;
        color: #fff;
        background-color: #269e8f;
        margin-left: 20px;
      }
    }
  }
  .btnBox {
    display: flex;
    margin-bottom: 15px;
    .addBtn {
      margin-right: 20px;
      .el-button {
        background-color: #269e8f;
        border: 1px solid #269e8f;
      }
    }
  }
  .footerPage {
    padding-top: 20px;
    text-align: right;
    padding-right: 30px;
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2aa59e !important; // 进行修改选中项背景和字体
      color: #fff;
    }
    .totalNum {
      font-size: 14px;
      font-weight: normal;
      margin-right: 10px;
    }
  }
}

.dialogTitle {
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
  font-size: 20px;
  font-weight: 500;
  padding: 22px 0 19px 0;
}
::v-deep .el-dialog__header {
  padding: 0 30px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .leftCancel {
    margin-left: 77px;
    background-color: #269e8f;
    border: 1px solid #269e8f;
  }
}
.dialogForm {
  .formBox {
    .formItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .left {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    .right {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    ::v-deep .el-input {
      height: 30px;
      width: 260px;
    }
    ::v-deep .el-input__inner {
      height: 30px;
    }
    ::v-deep .el-input__suffix {
      height: 40px;
    }
  }
}
::v-deep.dialogCompany {
  border-radius: 20px;
}
::v-deep .el-switch__label.is-active {
  color: #269e8f;
  font-weight: 600;
}
</style>
